<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- <meta name="viewport" content="width=device-width, initial-scale=0.33333333"> -->
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./flexible.js"></script>
  <style>
    body {
      margin: 0;
    }    

    div {
      height: 1.173333rem;
      background: #333;
      font-size: .48rem;
      text-align: center;
      line-height: 1.173333rem;
      color: #fff;
    }

    /* 
      引入flexible.js
      不要设置视口meta
      设计图尺寸 / 75 + rem单位
    
     */
  </style>
  <!-- 
    通过动态的设置视口缩放比例
    然后将页面变成实际的物理分辨率

    因为分辨率增加，页面缩小了，所以页面的内容也变小了，因此需要将内容适当的放大

    以iphone6为标准
      逻辑分辨率 375 * 667
      物理分辨率 750 * 1334
      使用第三种方案的实际分辨率
      750 * 1334
      因此，我们需要的尺寸刚好和设计图上的尺寸一致
   -->
</head>
<body>
  <div>
    文字
  </div>
  
</body>
</html>